<template>
  <div class="material">
    <!-- 筛选按钮 -->
    <div class="search-button">
      <el-button
        v-preventReClick
        v-if="pageType !== 'detail'"
        class="btn save"
        @click="handleSubmit"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >确定</el-button
      >
      <el-button class="btn direction" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>

    <div class="material-container">
      <div style="width: 100%">
        <!-- 表格数据 -->
        <el-table
          v-loading="loading"
          :data="materialList"
          border
          height="64vh"
          :header-cell-style="{ 'text-align': 'center' }"
          :header-cell-class-name="cellClass"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :selectable="checkSelect"
            width="55"
            align="center"
          />
          <el-table-column
            label="入库批次"
            prop="batchCode"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="数量"
            prop="quantity"
            :show-overflow-tooltip="true"
            min-width="80"
          />
          <el-table-column
            label="主设备物资序列号"
            prop="materialNumber"
            :show-overflow-tooltip="true"
            width="180"
          />
          <el-table-column
            label="厂家质保期（主设备）"
            prop="expireDate"
            :show-overflow-tooltip="true"
            width="170"
          />
          <el-table-column
            label="授权有效期（主设备）"
            prop="validityPeriod"
            :show-overflow-tooltip="true"
            width="170"
          />
          <el-table-column
            label="物料编号"
            prop="materialCode"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template #default="{ row }">
              <span>{{ row.materialCode ? row.materialCode : "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="物料名称"
            prop="materialName"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="出厂型号"
            prop="factoryCode"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="供应商"
            prop="supplierName"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="生产厂商"
            prop="manufactureName"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="单位"
            prop="materialUnit"
            :show-overflow-tooltip="true"
            min-width="110"
          />
          <el-table-column
            label="技术参数"
            prop="technologyParameter"
            :show-overflow-tooltip="true"
            width="120"
          />
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      class="pagination"
      :total="total"
      v-model:page="params.pageNum"
      v-model:limit="params.pageSize"
      @pagination="getMaterialList"
    />
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import { selectInventoryList } from "@/api/stock/outorder";
const emit = defineEmits([
  // 客户新增组件显隐
  "selectionMaterialShow",
  // 更新客户新增组件显隐
  "update:selectionMaterialShow",
  // 确定选中
  "submitChoose",
]);
const props = defineProps({
  // 操作类型
  materialNameStatus: {
    type: String,
    default: "",
  },

  materialCode: {
    type: String,
    default: "",
  },
  checkMaterialList: {
    type: Array,
    default: [],
  },
});
// 搜索参数
const params = reactive({
  categoryId: null,
  factoryCode: "",
  materialCode: "",
  materialName: "",
  stockType: null,
  supplierName: "",
  pageNum: 1,
  pageSize: 50,
});
// 表格加载效果
const loading = ref(false);
// 物料列表
const materialList = ref([]);
// 总数
const total = ref(0);
// 分类名称
const className = ref("");
// 操作类型
const pageType = ref("");
// 表格选中项
const multipleSelection = ref([]);
const multipleTableRef = ref(null);
/**
 * @description: 获取物料列表
 */
const getMaterialList = async () => {
  console.log(props.materialCode);

  if (props.materialNameStatus) {
    loading.value = true;
    const res = await selectInventoryList({
      materialCode: props.materialCode,
      materialName: props.materialNameStatus,
    });
    // if (props.checkMaterialList.length > 0) {
    //   // 遍历第一个数组
    //   props.checkMaterialList.forEach((obj1) => {
    //     // 在第二个数组中查找匹配的对象
    //     const matchedObj = res.data.find(
    //       (obj2) => obj2.tempoaryDetailId === obj1.tempoaryDetailId
    //     );
    //     if (matchedObj) {
    //       // 更新匹配对象的 checked 字段为 true
    //       matchedObj.checked = true;
    //     }
    //     materialList.value = res.rows;
    //     total.value = res.total;
    //     loading.value = false;
    //   });
    // } else {
    materialList.value = res.rows;
    total.value = res.total;
    loading.value = false;
    // }
  }
  // } catch {
  //   loading.value = false;
  // }
};

/**
 * @description: 监听分类名称
 * @param {String} val 变更后分类名称
 */
watch(className, (val) => {
  proxy.$refs["deptTreeRef"].filter(val);
});

/**
 * @description: 返回
 */
const handleBack = () => {
  emit("selectionInventory", false);
};

/**
 * @description: 确定选中
 */
const handleSubmit = () => {
  emit("submitChoose", multipleSelection.value);
};

/**
 * @description: 隐藏表头中的全选框
 */
const cellClass = (row) => {
  if (row.columnIndex === 0) {
    return "disabledCheck";
  }
};

/**
 * @description: 处理表格选中
 */
//  const handleSelectionChange = (list, row) => {
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  // if (list.length === 0) {
  //   multipleSelection.value = [];
  //   return;
  // }
  // multipleTableRef.value.clearSelection();
  // materialList.value.forEach((ele) => {
  //   if (ele.materialId === row.materialId) {
  //     multipleTableRef.value.toggleRowSelection(ele, true);
  //     multipleSelection.value = [ele];
  //   }
  // });
};
/**
 * @description: 表格选择禁用
 * @param row：当前行数据
 * @param index：当前第几位
 */
const checkSelect = (row, index) => {
  let isChecked = true;
  if (row.checked) {
    // 判断里面是否存在某个参数
    isChecked = false;
  } else {
    isChecked = true;
  }
  return isChecked;
};
onMounted(() => {
  getMaterialList();
});
</script>

<style lang="scss" scoped>
.material {
  padding: 20px 20px;
  width: 100%;
  height: 100%;

  .material-container {
    display: flex;

    .class-container {
      width: 240px;
      margin-right: 10px;
      padding-top: 30px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(26, 43, 26, 0.1);
      border-radius: 2px;
      overflow: auto;
      .class-top {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        .class-input {
          width: 180px;
        }
      }
    }
  }

  .pagination {
    margin: 20px auto;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
  .image-slot .el-icon {
    font-size: 30px;
  }
  /* 去掉全选按钮 */
  ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none !important;
  }
}
</style>
